<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>我的 - 数智化赋能“微情境·微宣讲”红色实践活动</title>

  <!-- 引入Swiper CSS -->
  <link rel="stylesheet" href="../templates/h5/assets/swiper-bundle.min.css">
  <!-- 引入Tailwind CSS -->
  <script src="../templates/h5/assets/tailwindcss3.4.17.css"></script>
  <!-- 引入Font Awesome -->
  <link href="../templates/h5/assets/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    // 配置Tailwind自定义颜色（红色主题）
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#b71211', // 主红色
            secondary: '#FFD700', // 辅助金色
            red: {
              700: '#B91C1C',    // 稍浅红色
              800: '#991B1B',    // 深一点的红色
              900: '#7F1D1D',    // 最深红色
            }
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      /* 导航栏样式 */
      .nav-item {
        @apply flex flex-col items-center justify-center text-gray-300 active:bg-red-800 h-full;
      }
      .nav-item.active {
        @apply text-white;
      }
      .nav-icon {
        @apply text-lg mb-1;
      }
      .nav-text {
        @apply text-xs;
      }
      
      /* 内容区块样式 */
      .user-section {
        @apply bg-red-800 rounded-lg p-4 mb-4 border border-red-700;
      }
      
      /* 表单样式 */
      .form-label {
        @apply block text-sm mb-2 font-medium;
      }
      .form-input {
        @apply w-full bg-red-900 border border-red-700 rounded px-3 py-2 text-white text-sm focus:outline-none focus:border-secondary;
      }
    }
  </style>
</head>
<body class="bg-primary text-white">
  <div class="max-w-md mx-auto min-h-screen flex flex-col">
    <!-- 页面标题栏 -->
    <div class="py-4 px-4 border-b border-red-700 bg-red-900 flex justify-center items-center">
      <h1 class="text-xl font-bold">我的</h1>
    </div>
    
    <!-- 页面内容区 -->
    <div class="flex-1 overflow-y-auto p-4 pb-24">
      <!-- 用户信息 -->
      <div class="user-section text-center mb-6">
        <div class="relative w-24 h-24 mx-auto mb-3">
          <img src="https://picsum.photos/200/200?random=50" alt="用户头像" class="w-full h-full rounded-full object-cover border-2 border-secondary">
          <div class="absolute bottom-0 right-0 w-6 h-6 rounded-full bg-secondary flex items-center justify-center text-red-900 text-xs">
            <i class="fa fa-camera"></i>
          </div>
        </div>
        <h2 class="text-lg font-bold">张小明</h2>
        <p class="text-sm text-gray-300 mt-1">当前身份：普通用户</p>
      </div>
      
      <!-- 身份认证 -->
      <div class="user-section">
        <h3 class="text-base font-medium mb-3 flex items-center">
          <i class="fa fa-id-card text-secondary mr-2"></i>身份认证
        </h3>
        
        <div class="space-y-3">
          <p class="text-sm text-gray-200 mb-4">
            绑定评委身份后可参与作品评分
          </p>
          
          <div class="mb-3">
            <label class="form-label">选择身份类型</label>
            <select class="form-input">
              <option value="">请选择身份</option>
              <option value="student">学生评委</option>
              <option value="teacher">教师评委</option>
            </select>
          </div>
          
          <div class="mb-3">
            <label class="form-label">账号</label>
            <input type="text" class="form-input" placeholder="请输入账号">
          </div>
          
          <div class="mb-4">
            <label class="form-label">密码</label>
            <input type="password" class="form-input" placeholder="请输入密码">
          </div>
          
          <button class="w-full bg-secondary text-red-900 py-2 rounded font-medium text-sm">
            绑定身份
          </button>
        </div>
      </div>
      
      <!-- 我的作品 -->
      <div class="user-section">
        <h3 class="text-base font-medium mb-3 flex items-center justify-between">
          <span><i class="fa fa-book text-secondary mr-2"></i>我的作品</span>
          <a href="#" class="text-xs text-secondary">查看全部</a>
        </h3>
        
        <div class="text-center py-6 text-sm text-gray-300">
          <i class="fa fa-file-o text-3xl mb-2"></i>
          <p>您尚未提交任何作品</p>
          <a href="#" class="text-secondary mt-2 inline-block">立即参赛</a>
        </div>
      </div>
      
      <!-- 退出登录相关 -->
      <div class="user-section">
        <div class="flex justify-between items-center py-2">
          <div class="flex items-center text-sm">
            <i class="fa fa-sign-out text-secondary mr-2"></i>
            <a href="index_yonghu_out.html"><span>退出登录</span></a>
          </div>
          <i class="fa fa-angle-right text-gray-400"></i>
        </div>
      </div>
      
      <!-- 退出登录按钮 -->
      <button id="logoutBtn" class="w-full mt-2 py-3 bg-red-900 border border-red-700 rounded font-medium text-sm">
        退出登录
      </button>
    </div>
    
    <!-- 底部固定导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-red-900 border-t border-red-700 z-50 h-16 flex">
      <a href="/h5/index" class="nav-item active flex-1">
        <i class="nav-icon fa fa-home"></i>
        <span class="nav-text">首页</span>
      </a>
      <a href="/h5/index_huodong" class="nav-item flex-1">
        <i class="nav-icon fa fa-calendar"></i>
        <span class="nav-text">活动</span>
      </a>
      <a href="/h5/index_paihangbang" class="nav-item flex-1">
        <i class="nav-icon fa fa-bar-chart"></i>
        <span class="nav-text">排行榜</span>
      </a>
      <a href="/h5/index_yonghu" class="nav-item flex-1">
        <i class="nav-icon fa fa-user"></i>
        <span class="nav-text">我的</span>
      </a>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 导航栏切换效果
	  const navItems = document.querySelectorAll('.nav-item');
	  navItems.forEach(item => {
		item.addEventListener('click', function(e) {
		  navItems.forEach(nav => nav.classList.remove('active'));
		  this.classList.add('active');
		});
	  });
      
      // 退出登录功能
      const logoutBtn = document.getElementById('logoutBtn');
      logoutBtn.addEventListener('click', function() {
        if (confirm('确定要退出登录吗？')) {
          // 实际项目中这里会执行退出登录逻辑
          alert('已成功退出登录');
          // 通常会跳转到登录页面
        }
      });
      
      // 身份绑定按钮功能
      const bindBtn = document.querySelector('button:contains("绑定身份")');
      if (bindBtn) {
        bindBtn.addEventListener('click', function() {
          const identity = document.querySelector('select').value;
          const account = document.querySelector('input[type="text"]').value;
          const password = document.querySelector('input[type="password"]').value;
          
          if (!identity) {
            alert('请选择身份类型');
            return;
          }
          
          if (!account) {
            alert('请输入账号');
            return;
          }
          
          if (!password) {
            alert('请输入密码');
            return;
          }
          
          // 实际项目中这里会执行身份绑定逻辑
          alert(`身份绑定成功！您已成为${identity === 'student' ? '学生评委' : '教师评委'}`);
          // 更新页面上的用户身份显示
          document.querySelector('.text-gray-300').textContent = `当前身份：${identity === 'student' ? '学生评委' : '教师评委'}`;
        });
      }
      
      // 退出登录选项点击事件
      document.querySelector('.fa-sign-out').parentElement.addEventListener('click', function(e) {
        e.preventDefault();
        if (confirm('确定要退出登录吗？')) {
          // 实际项目中这里会执行退出登录逻辑
          alert('已成功退出登录');
          // 通常会跳转到登录页面
        }
      });
    });
  </script>
</body>
</html>